<template>
	<view>
		<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
			<view class="menu">
				<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
				<image src="/static//index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
			</view>
			<view class="menu-right" slot="right">
				{{address_l || '-'}}
			</view>
		</u-navbar>
		<view class="mine-title-head">
			<view class="min-top-img">
					<image src="../../static/menu/mine-bg.png"  lazy-load></image>
				</view>
				<view class="mine-top">
					<view class="mine-info">
						
						
						<view class="mine-info-tt">
							<image src="/static/menu/white-logo.png" mode="widthFix" lazy-load @tap.stop="jumpCneter" class="mine-info-image"></image>
							<text>等级：{{lv ||'-'}}</text>
						</view>
						
						<view class="mine-info-c">
							<view class="id">
								<text>USDT余额 :</text>
								<view>{{db3_balance || 0}}</view>
							</view>
							<view class="id">
								<text>PEX余额 :</text>
								<view>{{db1_balance || 0}}</view>
							</view>
							
							  <view class="id">
							  	<text>PEP余额 :</text>
							  	<view>{{db11_balance || 0}}</view>
							  </view>
							 <!-- <view class="id">
							  	<text>RLD2余额 :</text>
							  	<view>{{db11_balance || 0}}</view>
							  </view>
							  <view class="id">
							  	<text>RLD锁仓 :</text>
							  	<view>{{rld2sysc || 0}}</view>
							  </view>
							  <view class="id">
							  	<text>RLD余额 :</text>
							  	<view>{{db1_balance || 0}}</view>
							  </view> -->
						</view>
					</view>
					<view class="mine-botton-list">
						<button @tap.stop="to('down')" hover-class="hover-transform1">提现</button>
						<button @tap.stop="chat" hover-class="hover-transform1">充值</button>	
					</view>
				</view>
		</view>
	
		
		
		
		
		
		
		
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l">
						<image src="../../static/menu/ce-0.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				
				
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-2.png" mode="widthFix"></image>生态</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
						<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(24)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-1.png" mode="widthFix"></image>抢单</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(6)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-3.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
						
						
						<view class="nav-item " hover-class="hover-transform1" @tap.stop="getQz(4)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item active" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5-1.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		<u-top-tips ref="message" :type="types"  zIndex="999" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		
		
		
		<view class="team-contant">
			
			
			<view class="team-list-title">
				<image src="../../static/index/index-t.png" mode="widthFix"></image>
				<text>资产明细</text>
			</view>
			<view class="team-list-title-l">
				<view class="team-list-title-l-i">事项</view>
				<view class="team-list-title-l-i">金额</view>
			</view>
			<template v-if="lists.length>0">
				<view class="list">
					
					
				<!-- 	<view class="lever-tip" v-if="showMesageShow">
						{{message}}
						
						<view class="income-item-l">
							<view>{{item.hash || ''}}<text>{{item.typeStr || ''}}</text></view>
							<text>{{item.time}}</text>
						</view>
						<view class="income-item-r">
							<text>{{item.status}}</text>
							<view>+{{item.num}}</view>
						</view>
					</view> -->
					<view class="level-wrapper">
						<view class="inner-content">
							<!-- <mix-tree :list="list"></mix-tree> -->
							<block v-for="(item,index) in lists" :key="index">
								<view class="inner-content-c">
									<view class="inner-content-l">
										<view class="">
											{{item.typeStr}}
										</view>
										 <text>{{item.time || ''}}</text>
									</view>
									<view class="inner-content-r">{{item.operate==1?'+':'-'}}{{item.num}}</view>
								</view>
								
							</block>
							
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="no-data">
					<image src="/static/imgs/nodata.png" mode="widthFix" lazy-load></image>
					<text>{{i18n.nodata}} </text>
				</view>
			</template>
		</view>
		
	</view>
</template>

<script>
	import {pageto, showToast, fetch, updownLine, forceUpdate, _updataTabBar} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	import SwitchLang from '@/components/switchlang/switchLang.vue'
	import clipboard from "@/common/js_sdk/dc-clipboard/clipboard.js"
	export default {
		components:{
			SwitchLang
		},
		computed:{
			i18n() {
				return this.$t('message')
			},
			...mapGetters(['getLoginInfo','getTextArr','getLangType', 'getIsBind', 'getCz_address'])
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				types:'',
				showPopuleAver:false,
				background:"#21242D",
				isSHow:false,
				tabInfo:{},
				info:{},
				imgCode:'',
				showNav:false,
				showPopule:false,
				number:false,
				address:'',
				addresst:'',
				isBind:false,
				refer:'',
				db3_balance:'',
				db11_balance:'',
				rld2sysc:'',
				usdt2sysc:'',
				db4_balance:'',
				yqurl:'',
				xqurl:'',
				cz_address:'',
				isCheck:false,
				typeIndex:0,
				signature:'',
				sysc:'', sczr:'',
				address_l:'',
				lists:[],
				page:1,
				type:'',
				list:[],
				db1_balance:'',
				lv:'',
				exchange_url:'',
				grab_url:''
			};
		},
		onShow() {
			this.getSomeUrl()
			this.page=1
			this.typeIndex = 0
			this.isBind =this.getIsBind;
			// console.log(this.getLoginInfo);
			// forceUpdate(this.getLangType);
			_updataTabBar(this.getTextArr,this.getLangType);
			this.getMine();
			this.isCheck = false;
			this.address_l = this.phoneNumShow(this.getLoginInfo.address)
			this.getHistory()
			// this.getRefer()
			// this.getLvCk();
		},
		onReachBottom(){
			this.getHistory()
		},
		methods:{
			async getSomeUrl(){
				await fetch('/api/Pledge/jumpUrl', '', "post").then(res=>{
					this.showLoad = false;
					if(res.data.code){
						
						if(res.data.code==1){
							// this.getUser()
							this.exchange_url = res.data.data.exchange_url
							this.grab_url = res.data.data.grab_url
						}
						
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			choseType(index){
				this.typeIndex = index
			},
			getCoins(){
				let data = {
					number:this.number,
					token_id:this.typeIndex==1?11:1,
					// type:2,
					// yzm:this.yzm
				}
				
				// this.addressCheck();return
				
				
				if(this.isCheck) return
				this.isCheck  = true;
				// this.laoding = true;
				fetch('/api/wallet/transfer',data,'POST').then(res=>{
					this.isCheck=false;
					this.showPopule = false;this.number = ''
					if(res.data.code==1){
						this.showTips(res.data.msg,'success')
					}else{
						this.showTips(res.data.msg,'error')
					}
					
					
				})
			},
			async addressCheck() {
				if(!this.number || this.number==null){
					this.showTips('请输入数量','error')
					return 
				}
				let _this = this
		          let message='提现验证';
		          let address = this.getLoginInfo.address;
		          ethereum.request({
		              method: "personal_sign",
		              params: [message, address],
		          }).then((signature) => {
			// _this.signature = signature
					// _this.showTips(signature,'success')
		              // 
		// console.log(signature);
						_this.showPopule = false
						// _this.number = ''
						if(signature && Number(signature.length)>=132){
							_this.getCoins()
							return
						}
		              
		              //有这个值证明签名了  就可以进行提现操作了
		              //这里进行提现操作
		
		          })
		          .catch((err) => {
					_this.number = ''
					_this.showPopule = false
		              // 异常  弹个窗
					_this.showTips(_this.getLangType=='en'?' 你无权使用':'你无权使用','success')
		//               alert('你无权使用');
		          });
	          
	
	        },
			copy(){
				let _this = this
				uni.hideToast();
				// #ifdef APP-PLUS
				clipboard.setText(_this.yqurl);
				_this.showTips(_this.getLangType=='en'?' 复制成功':'复制成功','success')
				// showToast(_this.getLangType=='en'?' copy success':'复制成功')
				// #endif
				// #ifdef MP-WEIXIN || H5
				uni.setClipboardData({
					data: _this.yqurl,
					success: function () {
						uni.hideToast();
						_this.showTips(_this.getLangType=='en'?' 复制成功':'复制成功','success')
						// showToast(_this.getLangType=='en'?' copy success':'复制成功')
					}
				});
				// #endif
			},
			...mapMutations(['setIsBind' ,'setInTeam', 'setCz_address']),
			
			async buyRefer(){
				this.showPopule = false;
				// this.showPopule1 = true;
				
				await fetch('/api/user/referBind',{address:this.getLoginInfo.address,refer:this.refer},'post').then(res=>{
					this.showPopuleAver = false;
					this.refer=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						// this.getUser()
						this.setIsBind(true)
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}else if(res.data.code==0){
						setTimeout(()=>{
							this.showPopuleAver = true;
						},1000)
					}
				})
			},
			async getHistory(){
				await fetch('/api/wallet/zcmx',{page:this.page,rows:20},'post').then(res=>{
					if(res.data.data.length ==0){
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						res.data.data.forEach((item,index)=>{
							item.poundage=Number(parseInt(item.poundage))
						})
						if(this.page ==1){
							this.page ++;
							uni.stopPullDownRefresh();
							this.lists = res.data.data;
							
						}else{
							this.page ++;
							let lists = res.data.data;
							lists.forEach((item,index)=>{
								// lists[index].num = parseFloat(item.num)
								// item.amount = parseFloat(item.amount)
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// // console.log(this.lists)
						}
						
						// console.log(this.lists,'lists')
					}else{
						// uni.showToast(res.data.msg)
					}
				})
			},
			async buyBut(){
				this.showPopule = false;
				this.showPopule1 = true;
				
				await fetch('/api/wallet/transfer',{address:this.address,number:this.number},'post').then(res=>{
					this.showPopule1 = false;
					this.number=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						this.getUser()
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}
				})
			},
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			clickBullentin() {
				
				uni.reLaunch({
					url:'../index/index'
				})
			},
			getQz(index){
				this.showNav=false
				if(index==1){
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==4){
					uni.reLaunch({
						url:'/pages/team/team'
					})
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==6){
					////  兑换
					if(this.exchange_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.exchange_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.exchange_url
						// #endif
					}
					return
				}else if(index==24){
					////  抢单
					if(this.grab_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.grab_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.grab_url
						// #endif
					}
					return
				}else if(index==3){
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
				// if(this.indexInfo.bps){
				// 	// #ifdef APP-PLUS
				// 	setTimeout(()=>{
				// 		plus.runtime.openURL(this.indexInfo.bps);
				// 	}, 500)	
				// 	// #endif
				// 	// #ifdef H5 
				// 	window.location.href=this.indexInfo.bps
				// 	// #endif
				// }
			},
			cancel() {
				this.isSHow = false
			},
			chat(){
				uni.navigateTo({
					url:'/pages/index/recharge'
				})
			},
			jumpCneter(){
				uni.navigateTo({
					url:'/pages/info/info?imgCode='+this.imgCode
				})
			},
			showTips(msg,type) {
				// <!-- type值可选的有primary(默认)、success、info、warning、error -->
				this.$refs.message.type=type
				this.$refs.message.show({
					title: msg
				});
			},
			to(val){
				switch (val){
					case 'authentication':
					showToast(`${this.i18n.in_development}...`)
					return
						pageto('/pages/authentication/index')
						break;
					case 'notice':
						pageto('/pages/new/notice')
						break;
					case 'setting':
						pageto('/pages/setting/setting')
						break;
					case 'spoc':
						// pageto('/pages/developing/developing')
						pageto('/pages/hash-card/hash-card')
						break;
					case 'team':
						this.setInTeam(true)
						pageto('/pages/team/team');
						break;
					case 'time':
						pageto('/pages/mine/timestamp');
						break;
					case 'invite': 
						// if(this.info.lv=='0'){
						// 	this.showpopule = true;
						// 	return
						// }
						pageto('/pages/invite/advertising');
						break;
					case "xieyi":
						pageto('/pages/setting/protocol');
						break;
					case 'down':
					// this.showPopule=true;return
						pageto(`/pages/index/coin`);
						
						
						break;
					case 'history-list':
					
							pageto(`/pages/bill/bili`);
						break;
					case 'recharge-list':
							pageto(`/pages/recharge-list/recharge-list`);
						break;	
					case 'coin-list':
					//提现记录
							pageto(`/pages/coin-list/coin-list`);
						break;	
						
					case 'contribution':
						pageto('/pages/team/team');
						break;
					case 'power':
					pageto('/pages/application/miner');
						break;
					case 'selectLang':
						this.isSHow = true;
						break;
					default:
						break;
				}
			},
			getLvCk(){
				fetch('/api/index/lv_ck', '', "post").then(res=>{
					
				})
				.catch(err=>{
					
				})
			},
			phoneNumShow (info) {
				// let that = this;
				let number = info; //获取到手机号码字段
				let mphone = number.substring(0, 4) + '****' + number.substring(info.length-5,info.length);
				// that.tel = mphone
				return mphone
			},
			getMine(){
				this.showLoad = true;
				fetch('/api/index/index', '', "post").then(res=>{
					this.showLoad = false;
					if(res.data.code){
						// console.log(res);
						// sysc:'', sczr:'',
						this.sysc = res.data.data.sysc
						this.sczr = res.data.data.sczr
						
						this.cz_address = res.data.data.cz_address_usdt
						this.setCz_address({'usdt':res.data.data.cz_address_usdt,'pex':res.data.data.cz_address_pex,'pep':res.data.data.cz_address_pep})
						this.db3_balance  = res.data.data.db3_balance
						this.db11_balance = res.data.data.db11_balance
						this.db4_balance  = res.data.data.db4_balance
						this.rld2sysc     = res.data.data.rld2sysc
						this.usdt2sysc    = res.data.data.usdt2sysc
						this.db1_balance  = res.data.data.db1_balance
						this.lv = res.data.data.name
						
						
						this.yqurl = res.data.data.yqurl
						this.xqurl = this.phoneNumShow(res.data.data.yqurl)
						this.info = res.data.data;
						let avatar = res.data.data.avatar
						this.tabInfo = res.data.data.zd_type;
						this.address = res.data.data.username
						this.addresst =  this.phoneNumShow(res.data.data.username)
						// console.log(this.addresst);
						if(!avatar){
							this.imgCode = ''
						}else{
							this.imgCode = avatar+''
						}
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/variable.scss';
	.popu-buy{
		background: $white;
		border-radius: 20rpx;
		color: #666;
		width:500rpx;
		&.popu-buy-other{
			width:600rpx;
			position: relative;
			.popule-close{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}
			}
		}
		.popu-buy-content{
			padding: 0 30rpx;
			.popule-item{
				
				border: 1rpx solid #e7eaf4;
				padding: 0 20rpx;
				input{
					height: 88rpx;
					line-height: 88rpx;
				}
			}
		}
		&.popu-buy-other{
			max-height: 650rpx;
			position:relative;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index:999;
		}
		.popu-buy-t{
			// line-height: 100rpx;
			margin:30rpx 0;
			border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 100rpx 0;
			word-wrap:break-word;
		}
		.popu-buy-ti{
			padding: 50rpx 0 0;
			margin:30rpx 0;
			// border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		.popu-buy-type{
			display: flex;
			align-items: center;
			padding: 20rpx 0 40rpx;
			.popu-buy-type-i{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				&.other-class{
					text{
						color: #334bf3;
					}
				}
				image{
					width: 40rpx;
					height: 40rpx;
					flex-direction: 1;
					margin-right: 10rpx;
				}
				text{
					display: block;
					line-height: 66rpx;
					font-size: 28rpx;
				}
			}
		}
		.popu-buy-p{
			padding: 30rpx 40rpx;
			.p{
				word-wrap:break-word;
				width: 500rpx;
				font-size: 28rpx;
			}
		}
		.popu-buy-c{
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.popu-buy-b{
			word-wrap:wrap;
			padding: 30rpx 40rpx;
			display: flex;
			align-items: center;
			
			button{
				flex: 1;
				border-radius: 8rpx;
				color: #666;
				line-height: 88rpx;
				height: 88rpx;
				font-size: 28rpx;
				background: #f3f5f6;
				&:first-of-type{
					margin-right: 40rpx;
					color: #666;
				}
				&:last-of-type{
					color: #fff;
					background: #334bf3;
				}
			}
			&.popu-buy-b-other{
				button{
					&:first-of-type{
						margin-right: 0;
						// color: #666;
					}
				}
				
			}
		}
	}
	.popu-buy{
		background: $white;
		border-radius: 20rpx;
		color: #666;
		width:500rpx;
		.popu-buy-content{
			padding: 0 30rpx;
			.popule-item{
				
				border: 1rpx solid #e7eaf4;
				padding: 0 20rpx;
				input{
					height: 88rpx;
					line-height: 88rpx;
				}
			}
		}
		&.popu-buy-other{
			max-height: 650rpx;
			position:relative;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index:999;
		}
		.popu-buy-t{
			// line-height: 100rpx;
			margin:30rpx 0;
			border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 100rpx 0;
			word-wrap:break-word;
		}
		.popu-buy-ti{
			padding: 50rpx 0 0;
			margin:30rpx 0;
			// border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		.popu-buy-p{
			padding: 30rpx 40rpx;
			.p{
				word-wrap:break-word;
				width: 500rpx;
				font-size: 28rpx;
			}
		}
		.popu-buy-c{
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.popu-buy-b{
			word-wrap:wrap;
			padding: 30rpx 40rpx;
			display: flex;
			align-items: center;
			
			button{
				flex: 1;
				border-radius: 8rpx;
				color: #666;
				line-height: 88rpx;
				height: 88rpx;
				font-size: 28rpx;
				background: #f3f5f6;
				&:first-of-type{
					margin-right: 40rpx;
					color: #666;
				}
				&:last-of-type{
					color: #fff;
					background: #334bf3;
				}
			}
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.mine-title-head{
		position: relative;
		width: 632upx;
		height: 660rpx;
		margin: 58rpx auto;
	}
	.min-top-img{
		position: absolute;
		left: 0;
		top: 0;
		width: 632upx;
		height: 660rpx;
		z-index: 1;	
		image{
			
			width: 632upx;
			height: 660rpx;
			flex-shrink: 0;
		}
	}
	.mine-botton-list{
		display: flex;
		justify-content: flex-end;
		button{
			width: 160rpx;
			height: 64rpx;
			background: linear-gradient(to right, #F5C249, #947222);
			border-radius: 8rpx;
			color: #2C3445;
			border: 0;
			font-size: 28rpx;
			padding:0;
			margin: 0;
			&:first-of-type{
				margin-right: 50rpx;
				background: linear-gradient(45deg, #BFBFBF, #E3E3E3, #F2F2F2, #EDEDED, #E1E1E1,#CCCCCC , #AFAFAF, #9F9F9F);
			}
			&::after{
				display: none;
			}
		}
	}
	.mine-top{
		padding: 40upx 48rpx 44rpx;
		position: relative;
		position: absolute;
		left: 0;
		top: 0;
		width: 632upx;
		height: 660upx;
		z-index: 4;
		.chat-icon{
			position: absolute;
			top: 80upx;
			right: 30upx;
			color: $white;
			i{
				font-size: 48upx;
			}
		}
		.mine-info{
			padding:0 30upx 0;
			// text-align: center;
			
			
			.mine-info-tt{
				display: flex;
				align-items: center;
				.mine-info-image{
					width: 56upx;
					height: 55upx;
					margin-right: 16rpx;
				}
				text{
					font-size: 28rpx;
					color: $white;
				}
			}
			
			.mine-info-c{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding:46rpx 0 18rpx;
				
				.name{
					font-size: 40upx;
					color: $white;
					font-weight: bold;
				}
				.id{
					width: 50%;
					color: $white;
					font-size: 26upx;
					margin-bottom: 44rpx;
					&:nth-child(even){
						text-align: right;
					}
					text{
						line-height: 34rpx;
						display: block;
						font-size: 24rpx;
						color: rgba($color: #ffffff, $alpha: .8);
					}
					view{
						line-height: 44rpx;
						margin-top: 16rpx;
						font-size: 30rpx;
					}
				}
				.info-grade{
					display: flex;
					align-items: center;
					// justify-content: center;
					view{
						padding: 0 18upx;
						line-height: 36upx;
						background-color: $theme-color;
						font-size: 22upx;
						color: $white;
						border-radius: 28upx;
						margin-right: 10upx;
					}
				}
				.refer-grade{
					display: flex;
					align-items: center;
					view{
						width: 440rpx;
						padding: 8rpx 22upx;
						line-height: 36upx;
						background-color: $theme-color;
						font-size: 22upx;
						color: $white;
						border-radius: 8upx;
						margin-right: 10upx;
						word-wrap: break-word;
					}
					button{
						width: 100rpx;
						height: 60rpx;
						font-size: 22upx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 6rpx;
						background-color: $theme-color;
						color: $white;
					}
					
				}
			}
		}
	}
	.mine-nav-list{
		margin: 0 30upx;
		background: #f3f5f6;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		.mine-nav-list-item{
			padding: 64upx 0 40upx;
			flex: 1;
			text-align: center;
			image{
				width: 100upx;
				height: 100upx;
				flex-shrink: 0;
			}
			view{
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.list-content{
		margin: 100rpx 30rpx;
		background: #f3f5f6;
		border-radius: 20rpx;
		overflow: hidden;
		.list-item{
			display: flex;
			padding: 0 35rpx;
			justify-content: space-between;
			align-items: center;
			position: relative;
			&::after{
				position: absolute;
				content: "";
				width: 620rpx;
				height: 2rpx;
				background: #e7eaf4;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
			// border-bottom: 1upx solid $split-line-color1;
			&:last-of-type{
				&::after{
					display: none;
				}
			}
			&.active{
				background: #fff;
				.list-item-text{
					color: #0F0C39;
					border-bottom: none;
				}
			}
			.list-item-text{
				flex: 1;
				font-size: 30upx;
				color: #666;
				line-height: 60upx;
				padding: 25upx 0;
			}
			.list-item-text-r{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: $text-gray-color1;
			}
		}
	}
	
	.list {
		.level-wrapper {
			// background: #181a29;
			padding-top: 1upx;
			padding: 0 48rpx;
			.inner-content {
				padding-left: 0;
				position: relative;
				.inner-content-c{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid  rgba($color: #9A9CB8, $alpha: .05);;
					padding: 30rpx 0;
					.inner-content-r{
						color: $white;
						font-size: 28rpx;
					}
					.inner-content-l{
						display: flex;
						// align-items: center;
						flex-direction: column;
						color: $white;
						font-size: 28rpx;
						text{
							color: rgba($color: #ffffff, $alpha: .6);
							margin-top: 8rpx;
							display: block;
							line-height: 34rpx;
							padding: 4rpx 8rpx;
							font-size: 26rpx;
						}
					}
				}
				overflow: hidden;
				.grade1 {
					.piece {
						padding-left: 48upx !important;
						margin-top: 0 !important;
					}
					.title {
						margin-left: 40upx !important;
						font-weight: bold !important;
						color: $default-color !important;
					}
					.info {
						margin-left: 40upx !important;
					}
					.btn {
						width: 48upx !important;
						height: 48upx !important;
						font-size: 20px !important;
						bordr-radius: 20upx !important;
					}
				}
				.grade2 {
					margin-left: 78upx;
					&:first-child {
						border: 1px solid red !important;
						background-color: #2daaff !important;
						.vline{
							height: 114upx !important;
							top: -78upx !important;
						}
					}
				}
				.grade3 {
					margin-left: 146upx;
					.vline {
						top: -79upx !important;
						height: 114upx !important;
					}
					.piece {
						padding-left: 0 !important;
					}
				}
				.piece {
					position: relative;
					padding-left: 36upx;
					margin-top: 70upx;
					.btn {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 36upx;
						height: 36upx;
						border-radius: 10upx;
						color: $default-color;
						background-color: #f00;
						border-radius: 8upx;
						font-size: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.vline {
						position: absolute;
						height: 228upx;
						width: 1upx;
						background-color: #f00;
						left: -52upx;
						top: -192upx;
					}
					.hline {
						position: absolute;
						width: 52upx;
						height: 1upx;
						background-color: #f00;
						left: -52upx;
						top: 33upx;
					}
					.title {
						font-size: 14px;
						color: #626262;
						margin-left: 16upx;
					}
					.info {
						font-size: 10px;
						color: #f00;
						margin-top: 20upx;
						margin-left: 16upx;
					}
					.two {
						width: 50upx;
						height: 26upx;
						font-size: 13px;
						color: rgba(79, 194, 149, 1);
						background-color: rgba(79, 194, 149, .2);
						padding: 4upx 12upx;
						margin-left: 16upx;
						border-radius: 6upx;
					}
					.three {
						width: 50upx;
						height: 26upx;
						font-size: 13px;
						color: rgba(255, 145, 64, 1);
						background-color: rgba(255, 145, 64, .2);
						padding: 4upx 12upx;
						margin-left: 16upx;
						border-radius: 6upx;
					}
				}
			}
		}
		.header{
			display: flex;
			flex-flow:row wrap;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 268upx;
			// background: $theme-color;
			&.lastColor{
				background-color: #c4aa6e;
			}
			.head-img{
				width: 144upx;
				height: 144upx;
				background-color: #fff;
				border-radius:72upx;
				text-align: center;
				overflow: hidden;
				image{
					width: 144upx;
					height: 144upx;
					border-radius: 72rpx;
				}
			}
			.fonts{
				width: 100%;
				text-align: center;
				font-size: 28upx;
				margin-top:-50upx;
				color: $black;
				font-weight: bold;
			}
		}
		.menuList-top{
			background: #ffffff;
			color: $black;
			padding: 40rpx 40rpx;
			margin-bottom: 20rpx;
			position: relative;
			box-shadow: -5rpx 5rpx 10rpx rgba($color: #000000, $alpha: .4);
			position: relative;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			&::before{
				content: "";
				left: 0;
				bottom: 0;
				z-index: -1;
				position: absolute;
				width: 100%;
				height: 100%;
				box-shadow: 5rpx -5rpx 10rpx rgba($color: #000000, $alpha: .1);
			}
			text{
				font-size: 40rpx;
				color: $black;
				margin-left: 15rpx;
				font-weight: bold;
			}
		}
		.menuList{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			// height: 176upx;
			justify-content: space-between;
			align-items: center;
			padding-top:44upx;
			padding-bottom:52upx;
			width: 100%;
			background-color:$theme-dark-color;
			box-shadow: -5rpx 5rpx 10rpx rgba($color: #000000, $alpha: .4);
			position: relative;
			&::before{
				content: "";
				left: 0;
				bottom: 0;
				z-index: -1;
				position: absolute;
				width: 100%;
				height: 100%;
				box-shadow: 5rpx -5rpx 10rpx rgba($color: #000000, $alpha: .1);
			}
			.item{
				width: 33.33%;
				text-align: center;
				margin-bottom: 15rpx;
				._p{
					font-size: 20px;
					color: $black;
					font-weight: bold;
					&.acolor{
						color:#c4aa6e;
					}
				}
				._div{
					font-size: 14px;
					margin-top: 10upx;
					color: $light_gray1;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.team-list-title{
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		image{
			width: 8rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		text{
			font-size: 28rpx;
			color: #F4C154;
			line-height: 36rpx;
			display: block;
			color: $white;
		}
	}
	.team-list-title-l{
		margin: 0 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid  rgba($color: #9A9CB8, $alpha: .05);;
		.team-list-title-l-i{
			line-height: 96rpx;
			font-size: 26rpx;
			color: $white;
		}
	}
</style>
	